<template>
  <div class="theme-active-text-color content">
   <div class="chart">
     <div class="chart_box" id="chart_1"></div>
     <div class="chart_box" id="chart_2"></div>
     <div class="chart_box" id="chart_3"></div>
   </div>
   <div class="table">
      <el-table
          :data="tableData"
          border
          stripe
          style="width: 100%">
          <el-table-column
            prop="merchant"
            label="商家名称"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="count"
            label="采购总量"
            align="center"
            >
          </el-table-column>
           <el-table-column
            prop="price"
            label="采购单价"
            align="center"
            >
          </el-table-column>
           <el-table-column
            prop="last"
            label="采购总价"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="settled"
            label="已结算"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="content"
            label="备注"
            align="center"
            >
          </el-table-column>
        </el-table>
   </div>
  </div>
</template>

<script>
import { goodsDetailApi,goodsSettleApi } from '@/api'
import * as echarts from 'echarts';
export default {
  name: "",
  components: {},
  data() {
    return {
     id:'',
     goodsId:'',
     tableData:[]
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.goodsId = this.$route.query.goodsId;
    console.log('shangp',this.goodsId)
    this.getGoodsDetail();
    this.getGoodsSettle()
  },
  mounted(){
    this.setChart1()
    this.setChart2()
    this.setChart3()
  },
  methods: {
    async getGoodsDetail(){
      let res = await goodsDetailApi({
        id:this.id
        })
      if(res){
           console.log("res",res)
      }
    },
    async getGoodsSettle(){
      let res = await goodsSettleApi({
        goodsId:this.goodsId
        })
      if(res){
           console.log("res66",res);
           this.tableData = res.data
      }
    },

    setChart1(){
      var chartDom = document.getElementById('chart_1');
      var myChart = echarts.init(chartDom,null,{devicePixelRatio:2.5});
      var option = {
          title: {
              text: '消耗量/余量',
              left: 'center'
          },
          tooltip: {
              trigger: 'item'
          },
          legend: {
              orient: 'vertical',
              left: 'left',
          },
          series: [
              {
                  type: 'pie',
                  radius: '50%',
                  data: [
                      {value: 1048, name: '消耗量'},
                      {value: 735, name: '剩余量'},
                  ],
                  emphasis: {
                      itemStyle: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                  }
              }
          ]
            };
            option && myChart.setOption(option);
    },
    setChart2(){
      var chartDom = document.getElementById('chart_2');
      var myChart = echarts.init(chartDom,null,{devicePixelRatio:2.5});
      var option = {
          title:{
            text:"各项目消耗量",
          },
          xAxis: {
              type: 'category',
              data: ['荆州', '武汉', '宜昌', '咸宁', '孝感', '黄冈', '襄阳'],
              axisTick: {
                alignWithLabel: true
            }
          },
          color:['#FD7733'],    //柱状体颜色
          tooltip: {
              trigger: 'axis',
              axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              }
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          yAxis: [
              { type: 'value'}
          ],
          series: [
              {
                  name: '消耗量',
                  type: 'bar',
                  barWidth: '60%',
                  data: [10, 52, 200, 334, 390, 330, 220]
              }
          ]
      };
      option && myChart.setOption(option);
    },
    setChart3(){
      var chartDom = document.getElementById('chart_3');
      var myChart = echarts.init(chartDom,null,{devicePixelRatio:2.5});
      var option = {
          title:{
            text:"材料价格变化表",
          },
          color:['#FD7733'],    //颜色
          tooltip: {
              trigger: 'axis',
              axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              }
          },
          xAxis: {
              type: 'category',
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
          },
          yAxis: {
              type: 'value'
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          series: [{
              data: [150, 230, 224, 218, 135, 147, 260],
              type: 'line'
          }]
      };
      option && myChart.setOption(option);
    }
  }
};
</script>
<style lang="less" scoped>
.content{
  width: 100%;
  height: 100%;
  background: rgb(253, 252, 252);
  box-sizing: border-box;

  .chart{
    width: 10.6rem;
    height:3.1rem ;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .chart_box{
      width: 3.4rem;
      height: 3rem;
      border-radius: .1rem;
      background: rgb(243, 243, 243);
      box-sizing: border-box;
      padding: 10px;
    }

  }
}

</style>